<template>
  <el-image-viewer
    v-if="show"
    :on-close="handleClose"
    :url-list="urlList"
    :z-index="zIndex"
  />
</template>

<script>
import { Image } from 'element-ui'

export default {
  name: 'JspImageViewer',
  components: {
    ElImageViewer: Image.components.ImageViewer
  },
  props: {
    urlList: {
      type: Array,
      default: () => []
    },
    zIndex: {
      type: Number,
      default: 2000
    },
    show: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      prevOverflow: ''
    }
  },
  watch: {
    show(newV, oldV) {
      if (newV) {
        this.prevOverflow = document.body.style.overflow
        document.body.style.overflow = 'hidden'
      } else {
        document.body.style.overflow = this.prevOverflow
      }
    }
  },
  methods: {
    handleClose() {
      this.$emit('close')
    }
  }
}
</script>
